import { useState, useEffect } from "react";
import "./ripple.scss"; // 导入 Ripple 样式

interface RippleProps {
  x: number;
  y: number;
  size: number;
}

export const Ripple = ({ x, y, size }: RippleProps): React.ReactElement => {
  const [rippleStyle, setRippleStyle] = useState({
    top: y,
    left: x,
    width: size,
    height: size,
  });

  // 动态设置样式
  useEffect(() => {
    setRippleStyle((prev) => ({
      ...prev,
      transform: "scale(2)",
      opacity: 0,
    }));
  }, []);

  return <span className="ripple" style={rippleStyle} />;
};
